<template>
  <div class="addMonthCarBgc">
    <!-- 导航栏 -->
    <div class="addMonthCard">
      <div class="addMonthCardCenter">
        <el-page-header @back="goBack">
          <template v-slot:content>
            <!-- 在这里定义您想要显示的内容 -->
            <span>{{ title }}</span>
          </template>
        </el-page-header>
      </div>
      <div class="addMonthCardCenter1">黑马程序员</div>
    </div>
    <div class="vehicle">
      <!-- 车辆信息 -->
      <el-form ref="formDate" label-width="100px" :rules="rules" :model="formDate" class="demo-ruleForm">

        <el-card class="box-card" style="width:80vw">
          <div slot="header" class="clearfix">
            <span>车辆信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="车主姓名" prop="personName">
              <el-input v-model="formDate.personName" style="width:25vw" placeholder="请输入车主姓名" />
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="联系方式" prop="phoneNumber">
                <el-input v-model="formDate.phoneNumber" style="width:25vw" placeholder="请输入联系方式" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="车牌号码" prop="carNumber">
              <el-input v-model="formDate.carNumber" style="width:25vw" placeholder="请输入车牌号码" />
            </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="车辆品牌" prop="carBrand">
                <el-input v-model="formDate.carBrand" style="width:25vw" placeholder="请输入车辆品牌" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 最近一次月卡缴费信息 -->
        <el-card class="box-card" style="width:80vw">

          <div slot="header" class="clearfix">
            <!-- 在这里自定义要插入的内容 -->
            <span>{{ clearfix }}</span>
          </div>

          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="有效日期" prop="selectedDate">
                <el-date-picker
                  v-model="selectedDate"
                  style="width:25vw"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                />
              </el-form-item></el-col>
            <el-col :span="4" />
            <el-col :span="10">
              <el-form-item label="支付金额" prop="paymentAmount">
                <el-input v-model="formDate.paymentAmount" style="width:25vw" placeholder="请输入支付金额" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10"> <el-form-item label="支付方式" prop="paymentMethod">
              <el-select
                v-model="formDate.paymentMethod"
                placeholder="请选择支付方式"
                style="width:25vw"
                size="medium"
                class="kuan"
              >
                <el-option label="支付宝" value="Alipay" />
                <el-option label="微信" value="WeChat" />
                <el-option label="现金支付" value="Cash" />
              </el-select>
            </el-form-item></el-col>
          </el-row>
        </el-card>
      </el-form>
    </div>
    <div class="queding">
      <el-button @click="resetForm">重置</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>

  </div>
</template>
<script>
import { postParkingCard, getParkingCardDetail, putParkingCardDetail } from '@/api/TrafficManagement/monthCar'
export default {
  name: 'AddMonthCard',
  props: {
    renew: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      formDate: {
        personName: '', // 车主姓名
        phoneNumber: '', // 联系方式
        carNumber: '', // 车牌号码
        carBrand: '', // 车辆品牌
        cardStartDate: '', // 有效时间开始
        cardEndDate: '', // 有效时间结束
        paymentAmount: '', // 支付金额
        paymentMethod: '' // 支付方式,支付宝:Alipay,微信:WeChat,线下:Cash
      },
      selectedDate: [], // 添加一个变量来存储日期选择器的值
      // 表单效验
      rules: {
        personName: [{ required: true, message: '请输入车主姓名!', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入联系方式!', trigger: 'blur' }],
        carNumber: [{ required: true, message: '请输入车牌号码!', trigger: 'blur' }],
        carBrand: [{ required: true, message: '请输入车辆品牌!', trigger: 'blur' }],
        // selectedDate: [{ required: true, message: '请输入有效日期!', trigger: 'blur' }],
        paymentAmount: [{ required: true, message: '请输入支付金额!', trigger: 'blur' }],
        paymentMethod: [{ required: true, message: '请输入支付方式!', trigger: 'change' }]

      },
      title: '添加月卡',
      clearfix: '最近一次月卡缴费信息',
      isDisabled: false // 控制输入框禁用状态

    }
  },
  // 编辑回显
  async created() {
    if (this.$route.params.id) {
      this.title = '编辑月卡'
      const { data } = await getParkingCardDetail(this.$route.params.id)
      this.formDate = data
      this.isDisabled = false
    }
  },
  methods: {
    // 跳转页面
    goBack() {
      this.$router.push('/monthCar')
    },
    // 确认按钮
    async submit() {
      // 表单校验
      this.$refs.formDate.validate()
      const [startDate, endDate] = this.selectedDate // 获取开始和结束日期
      this.formDate.cardStartDate = startDate // 将开始日期赋值给cardStartDate字段
      this.formDate.cardEndDate = endDate // 将结束日期赋值给cardEndDate字段
      if (this.title === '编辑月卡') {
        delete this.formDate.cardStatus
        // 发送请求
        await putParkingCardDetail(this.formDate)
        // 弹出提示
        this.$message.success('编辑成功')
      } else if (this.title === '添加月卡') {
        this.title = '添加月卡'
        // 发送请求
        await postParkingCard(this.formDate)
        // 弹出提示
        this.$message.success('添加成功')
      }
      // 跳转页面
      this.$router.push('/monthCar')
      // 清空表单
      this.$refs.formDate.resetFields()
    },
    // 清空表单
    resetForm() {
      this.$refs.formDate.resetFields()
    }
  }
}
</script>
<style  scoped>
.addMonthCarBgc{
  width: 100%;
  height: 100%;
  background-color: #f4f6f8;
}
.addMonthCard{
 width: 100%;
 height: 60px;
 background-color: #fff;
 display: flex;
flex-direction:row;
justify-content:space-between;
 font-size: 18px;
}
.addMonthCardCenter{
  width: 200px;
  height: 70px;
 margin-top: 20px;
 margin-left: 20px;
}
.addMonthCardCenter1{
width: 100px;
height: 70px;
margin-top: 20px;
margin-right: 20px;
}
.vehicle{
  width: 100vw;
  /* margin-left: 140px; */
}
.box-card{
  margin-top: 30px;
   margin: 30px auto;
}
.queding{
  width: 100vw;
  height: 100px;
  background-color: #fff;
  margin-top: 140px;

    text-align: center;
    line-height: 100px;

}

</style>

